import React, { Component } from 'react';
import { Form, Input, Button, Row, Col, message, Icon } from 'antd';
import { router } from 'umi';
import { connect } from 'dva';
import styles from './index.less';
const accountIcon = (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <img
      style={{ display: 'inlineBlock', width: '26px', height: '26px' }}
      src="https://youserver.com/login/userIcon.png"
      alt="userIcon"
    />
    <Icon
      theme="outlined"
      style={{ fontSize: '25px', color: '#D8DADC' }}
      className={styles.icon}
      type="minus"
    />
  </div>
);
const passwordIcon = (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <img
      style={{ display: 'inlineBlock', width: '26px', height: '26px' }}
      src="https://youserver.com/login/passwordIcon.png"
      alt="passwordIcon"
    />
    <Icon style={{ fontSize: '25px', color: '#D8DADC' }} className={styles.icon} type="minus" />
  </div>
);
@connect(() => ({}))
class ResetForm extends Component {
  state = {
    isBotton: true,
    number: '60',
    dataMobile: {},
  };
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values, 'values');
        const { dataMobile } = this.state;
        const { dispatch } = this.props;
        dispatch({
          type: 'login/restPasswordData',
          payload: {
            ...values,
            codeKey: dataMobile.codeKey,
            codeTime: dataMobile.codeTime,
            userType: 'OPE',
          },
          callback: res => {
            message.success('修改成功～');
            router.push('/user/login');
          },
        });
      }
    });
  };

  onEmailCode = () => {
    const {
      form: { getFieldValue },
    } = this.props;
    const regu = /^1\d{10}$/;
    const { dispatch } = this.props;
    dispatch({
      type: 'login/sendValidateCodeData',
      payload: {
        mobile: getFieldValue('mobile'),
      },
      callback: res => {
        this.setState({
          dataMobile: res.data,
        });
        message.success('验证码发送成功～');
      },
    });
    if (regu.test(getFieldValue('mobile'))) {
      this.setState({
        isBotton: false,
      });
      this.state.timer = setInterval(() => {
        const time = this.state.number--;
        this.setState({
          time: time,
        });
        if (this.state.number < 1) {
          clearInterval(this.state.timer);
          this.setState({
            number: '60',
          });
          return this.setState({
            isBotton: true,
          });
        }
      }, 1000);
    } else {
      this.onError('请正确填写手机号');
    }
  };
  onError = res => {
    message.error(res);
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className={styles.resetFrom}>
        <Form onSubmit={this.handleSubmit} className="login-form">
          <div className={styles.loginInput}>
            <Form.Item>
              {getFieldDecorator('mobile', {
                rules: [{ required: true, message: '请输入手机号' }],
              })(
                <Input
                  prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="请输入手机号"
                />,
              )}
            </Form.Item>

            <div className={styles.verification}>
              <Form.Item>
                {getFieldDecorator('code', {
                  rules: [{ required: true, message: '请填写验证码' }],
                })(<Input className={styles.verificationInput} placeholder="请填写验证码" />)}
                {this.state.isBotton ? (
                  <Button
                    style={{ width: '118px', marginLeft: '11px', height: '40px' }}
                    onClick={this.onEmailCode}
                  >
                    获取验证码
                  </Button>
                ) : (
                  <Button
                    style={{ width: '118px', marginLeft: '11px', height: '40px' }}
                    disabled={true}
                  >
                    {this.state.number}s
                  </Button>
                )}
              </Form.Item>
            </div>
            <Form.Item>
              {getFieldDecorator('newPassword', {
                rules: [{ required: true, message: '请输入新密码' }],
              })(
                <Input
                  type="password"
                  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="请输入新密码"
                />,
              )}
            </Form.Item>
          </div>
          <Form.Item style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Button className={styles.button} type="primary" htmlType="submit">
              {' '}
              确认{' '}
            </Button>
            <Button
              className={styles.button}
              type="link"
              onClick={() => router.push('/user/login')}
            >
              使用已有帐户登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
const WrappedNormalResetForm = Form.create({ name: 'normal_login' })(ResetForm);
export default WrappedNormalResetForm;
